<template>
  <div>
    <el-dialog title="新建人群" :visible.sync="open" width="1200px" append-to-body @close="toCancelBox">
      <el-form ref="updateGroup" v-model="updateGroup" :rules="rules" label-width="80px">
        <div class="dialog-body">
          <div class="dialog-left">
            <div class="report-list-div">
              <ul class="condition-selector-list">
                <li class="condition-selector-item" :class="item.status === true ? 'selected' : 'normal' "
                  v-for="(item, key) in this.checkReport" :key="key" type="text" @click="reportChoose(item)">
                  {{ item.definitionShowname }}
                </li>
              </ul>
            </div>
          </div>

          <div class="dialog-right">
            <div v-for="(item, key) in this.reportTable" :key="key"
              :class="item.definitionType == '2' ? 'dialog-right-level-div' : 'dialog-right-div' "
              v-if="reportTable.length > 0">
              <div class="dialog-cont">
                <div class="dialog-conten-text">{{item.definitionShowname}}:</div>
                <div class="dialog-conten-text">{{item.definitionDesc}}</div>
                <!-- 自由输入 -->
                <div v-if="item.definitionType == '0' " class="dialog-conten-text">
                  <div style="float: left;margin-top: 8px;">最近</div>
                  <div style="width: 197px;height: 30px;float: left;margin-left: 5px;">
                    <input autocomplete="off" v-model="item.definitionValue" placeholder="请输入1~720的数值"
                      class="zent-input" type="text">
                  </div>
                   <div style="float: left;margin-top: 8px;margin-left: 5px;">{{item.definitionUnit}}</div>
                  <!-- <div style="float: left;margin-top: 8px;margin-left: 5px;">{{updateGroup.definitionUnit}}</div> -->
                </div>
                <!-- 可选大于小于 -->
                <div v-if="item.definitionType == '1' &&  item.definitionUnit== '元' "  class="dialog-conten-text">
                  <div style="float: left;margin-top: 8px;">
                    <el-select v-model="item.definitionUnitvalue" placeholder="请选择">
                      <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                  <div style="float: left;margin-left: 5px;margin-top: 8px;"
                    v-if="item.definitionUnitvalue == 'le' || item.definitionUnitvalue == 'ge' ">
                    <el-input-number style="width: 130px;" v-model="item.definitionValue" controls-position="right"
                      @change="handleChange(num)" :step="0.01" :min="0.01" :max="100000000"></el-input-number>
                  </div>
                  <div style="float: left;margin-left: 5px;margin-top: 8px;"
                    v-if="item.definitionUnitvalue == 'section'  ">
                    <el-input-number style="width: 130px;" v-model="item.definitionValue" controls-position="right"
                      @change="handleChange(num)" :step="0.01" :min="0.01" :max="100000000"></el-input-number>
                    -
                    <el-input-number style="width: 130px;" v-model="item.definitionSectionvalue"
                      controls-position="right" @change="handleChange(num)" :step="0.01" :min="0.01" :max="100000000">
                    </el-input-number>
                  </div>
                  <div style="float: left;margin-top: 15px;margin-left: 5px;">{{item.definitionUnit}}</div>
                </div>

                <div v-if="item.definitionType == '1' &&  item.definitionUnit != '元' "  class="dialog-conten-text">
                  <div style="float: left;margin-top: 8px;">
                    <el-select v-model="item.definitionUnitvalue" placeholder="请选择">
                      <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                  <div style="float: left;margin-left: 5px;margin-top: 8px;"
                    v-if="item.definitionUnitvalue == 'le' || item.definitionUnitvalue == 'ge'  ">
                    <el-input-number style="width: 130px;" v-model="item.definitionValue" controls-position="right"
                      @change="handleChange(num)" :step="1" :min="1" :max="100000000"></el-input-number>
                  </div>
                  <div style="float: left;margin-left: 5px;margin-top: 8px;"
                    v-if="item.definitionUnitvalue == 'section'  ">
                    <el-input-number style="width: 130px;" v-model="item.definitionValue" controls-position="right"
                      @change="handleChange(num)" :step="1" :min="1" :max="100000000"></el-input-number>
                    -
                    <el-input-number style="width: 130px;" v-model="item.definitionSectionvalue"
                      controls-position="right" @change="handleChange(num)" :step="1" :min="1" :max="100000000">
                    </el-input-number>
                  </div>
                  <div style="float: left;margin-top: 15px;margin-left: 5px;">{{item.definitionUnit}}</div>
                </div>
                <!-- 等级 -->
                <div v-if="item.definitionType == '2' " class="dialog-input">
                  <div style="float: left;margin-top: 8px;">
                    <div v-if="payLevel.length > 0 ">
                      <div class="dia-level">付费等级</div>
                      <div class="dia-level">
                        <el-checkbox-group v-model="payLevelCheckList" @change="payLevelChange(payLevelCheckList,item)">
                          <el-checkbox :label="levelItem.levelId" v-for="(levelItem, key) in payLevel" :key="key">
                            {{levelItem.levelName}}
                          </el-checkbox>
                        </el-checkbox-group>
                      </div>
                    </div>
                    <div v-if="freeLevel.length > 0 ">
                      <div class="dia-level">免费等级</div>
                      <div class="dia-level">
                        <el-checkbox-group v-model="freeLevelCheckList"
                          @change="freeLevelChange(freeLevelCheckList,item)">
                          <el-checkbox :label="levelItem.levelId" v-for="(levelItem, key) in freeLevel" :key="key">
                            {{levelItem.levelName}}
                          </el-checkbox>
                        </el-checkbox-group>
                      </div>

                    </div>
                  </div>
                </div>
                <!-- 日期 -->
                <div v-if="item.definitionType == '3' " class="dialog-input">


                </div>

                <!-- 单选框 -->
                <div v-if="item.definitionType == '4' " class="dialog-conten-text">
                  <div>
                    <el-radio v-model="item.definitionValue" label="1">男</el-radio>
                    <el-radio v-model="item.definitionValue" label="0">女</el-radio>
                  </div>
                </div>
                <span class="reportDeleteClass" @click="reportDelete(item)">X</span>
              </div>
            </div>


            <div v-if="reportTable.length == 0" class="content ">
              <div class="conditions-container">
                <div class="_2huS">
                  <div class="_3RT8">
                    <div class="_3NgB" style="width: 160px; height: 160px;">
                      <div style="margin-top: -85px;">
                        <div><span class="_3VWa">条件A</span></div>
                        <div class="_1Tmj">
                          <div class="_3D3R"></div>
                          <div class="_2qBv"></div>
                        </div>
                      </div>
                    </div>
                    <div class="_2z7K">
                      <div class="_1Tmj">
                        <div class="_2qBv"></div>
                        <div class="_3D3R"></div>
                      </div>
                      <div><span class="_3VWa">新建人群</span><span class="_3I1f">（条件之间取交集即人群）</span></div>
                    </div>
                    <div class="_3NgB" style="margin-left: -28px; margin-top: 14px; width: 132px; height: 132px;">
                      <div style="margin-top: -81px;">
                        <div><span class="_3VWa">条件B</span></div>
                        <div class="_1Tmj">
                          <div class="_3D3R"></div>
                          <div class="_2qBv"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="crowd-estimate" v-if="reportTable.length > 0">
              预估人数：
              <div style="width: 197px;height: 30px;float: left;margin-left: 5px;">
                <input autocomplete="off" disabled="" v-model="this.updateGroup.groupNumber" class="zent-input"
                  type="text">
              </div>
              <el-button style="margin-left: 10px;" type="primary" @click="coutGroupNumber">计算新人群</el-button>
              </el-input>
            </div>
          </div>
          <div class="dialog-name">
            <el-row>
              <el-col :span="12">
                <el-form-item label="人群名称" prop="groupName">
                  <el-input v-model="updateGroup.groupName" placeholder="请输入人群名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="人群简介">
                  <el-input v-model="updateGroup.groupDesc" placeholder="请输入人群简介"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>

        <div class="dw">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="toCancelBox">取 消</el-button>
        </div>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
  import {
    getAllDefinitionInfo
  } from "@/api/customer/groupDefinition";
  import {
    selectGroupCustomerInfo,
    addGroup,
    editGroup
  } from "@/api/customer/CustomerGroup";
  import groupLevelInfo from "@/components/Customer/groupLevelInfo";
  import {
    listLevel
  } from "@/api/customer/level";
  export default {
    props: ["updateGroup", "updateGroupStr"],
    components: {
      groupLevelInfo
    },
    data() {
      return {

        title: "",
        open: "",
        reportDlgVisible: false,
        groupName: "",
        groupNumber: "",
        groupDesc: "",
        levelValue: "",
        groupDefinitionInfoQuerie: [],
        customerGroupVo: {},
        reportTable: [],
        checkReport: [],
        leftData: [],
        reportRadio: [],
        payLevelCheckList: [],
        freeLevelCheckList: [],
        levelInfo: [],
        payLevel: [],
        freeLevel: [],
        //特征信息
        DefinitionInfo: [],
        num: 1,
        typeSelect: "",
        radio: '1',
        typeOptions: [{
            value: 'ge',
            label: '大于',
          },
          {
            value: 'le',
            label: '小于',
          },
          {
            value: 'section',
            label: '区间',
          }
        ],
        rules: {

        },
      }
    },
    created() {
      this.open = true;
      getAllDefinitionInfo().then(response => {
        this.DefinitionInfo = response.data;
        this.DefinitionInfo.forEach(item => {
          item.status = false;
          if (this.updateGroup.length != 0) {
            this.customerGroupVo.groupUid = this.updateGroup.groupUid;
            this.updateGroup.customerGroupdefinitionInfoVos.forEach(definitionItem => {
              if (definitionItem.definitionUid == item.definitionUid) {
                item.status = true;
                //添加到右边
                if (this.leftData.length === 0) {
                  this.leftData.push(item)
                } else {
                  this.leftData.splice(0, 1, item)
                }
                if (this.leftData.length === 0) {
                  this.$message.warning('请选择要添加的数据')
                } else {
                  for (let i = 0; i < this.leftData.length; i++) {
                    const item = this.leftData[i];
                    if (item === this.leftData[0]) {
                      this.leftData.splice(i, 1) // 数据从左边列表删除
                      this.reportTable.push(item) // 数据添加到右边列表
                      this.reportTable.forEach(report => {
                        if (definitionItem.customerGroupDefinitionVo.definitionName == 'memberLevel') {
                          this.payLevelCheckList = definitionItem.definitionValue.split("/").slice(1)
                            .map(parseInt);
                          this.freeLevelCheckList = definitionItem.definitionSectionvalue.split("/")
                            .slice(1).map(parseInt);
                        } else {
                          report.definitionValue = definitionItem.definitionValue;
                          report.definitionSectionvalue = definitionItem.definitionSectionvalue;
                          report.definitionUnitvalue = definitionItem.definitionUnitvalue;
                        }
                      })
                    }
                  }
                }
              }
            })
          }
          this.checkReport.push(item);
        })
        console.log(this.freeLevelCheckList)
      });
      listLevel().then(response => {
        response.rows.forEach(item => {
          if (item.customerPattern == '1') {
            this.payLevel.push(item);
          }
          if (item.customerPattern == '0') {
            this.freeLevel.push(item);
          }
        });
      });
      console.log(this.payLevel);
    },
    methods: {
      payLevelChange(payLevelCheckList, item) {
        item.definitionValue = "";
        payLevelCheckList.forEach(payList => {
          item.definitionValue = item.definitionValue + "/" + payList;
        });
        console.log(item)
      },
      freeLevelChange(freeLevelCheckList, item) {
        item.definitionSectionvalue = "";
        freeLevelCheckList.forEach(freeList => {
          item.definitionSectionvalue = item.definitionSectionvalue + "/" + freeList;
        });
        console.log(item)
      },

      //计算新人群
      coutGroupNumber() {
        console.log(this.reportTable)
        this.groupDefinitionInfoQuerie = this.reportTable;
        selectGroupCustomerInfo(this.groupDefinitionInfoQuerie).then(response => {
          var number = response.length;
          console.log(number);
          this.updateGroup.groupNumber = number;
          this.$forceUpdate();
        })
      },
      //关闭
      toCancelBox() {
        this.open = false;
        this.$emit("update:updateGroupStr", false);
      },
      //提交
      submitForm() {
        let errCount = 0;
        if (this.reportTable.length == 0) {
          this.$message.error("至少添加一个特征");
          errCount++;
        }
        if(this.updateGroup.groupName == null){
          this.$message.error("请输入人群名称");
          errCount++;
        }
        if (errCount == 0) {
          this.customerGroupVo.customerGroupdefinitionInfoVos = this.reportTable;
          this.customerGroupVo.groupNumber = this.updateGroup.groupNumber;
          this.customerGroupVo.groupName = this.updateGroup.groupName;
          this.customerGroupVo.groupDesc = this.updateGroup.groupDesc;
          if (this.customerGroupVo.groupUid != null) {
            editGroup(this.customerGroupVo).then(response => {
              if (response.code == 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.$emit('getData', null)
              }
            })
          } else {
            console.log(this.customerGroupVo);
            addGroup(this.customerGroupVo).then(response => {
              if (response.code == 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.$emit('getData', null)
              }
            })
          }
        }
      },
      clean() {
        this.Openupdate = false;
        this.open = false;
      },
      handleChange(num) {
        console.log(this.typeSelect)
        // console.log(num);
      },
      // 选中左边列表的某一条，checkReport存放左边选中的数据
      reportChoose: function(item) {
        if (item.status == true) {
          item.status = false;
          for (var i = 0; i < this.checkReport.length; i++) {
            if (item.definitionName == this.checkReport[i].definitionName) {
              this.checkReport[i].status = false;
              continue;
            }
          }
        } else {
          item.status = true;
          for (var i = 0; i < this.checkReport.length; i++) {
            if (item.definitionName == this.checkReport[i].definitionName) {
              this.checkReport[i].status = true;
              continue;
            }
          }
        }
        this.$forceUpdate();
        if (item.status == true) {
          if (this.leftData.length === 0) {
            this.leftData.push(item)
          } else {
            this.leftData.splice(0, 1, item)
          }
          console.log(this.leftData);
          if (this.leftData.length === 0) {
            this.$message.warning('请选择要添加的数据')
          } else {
            for (let i = 0; i < this.leftData.length; i++) {
              const item = this.leftData[i];
              if (item === this.leftData[0]) {
                this.leftData.splice(i, 1) // 数据从左边列表删除
                this.reportTable.push(item) // 数据添加到右边列表
                // this.checkReport = []
              }
            }
          }
        } else {
          const reportRow = item;
          for (let i = 0; i < this.reportTable.length; i++) {
            const item = this.reportTable[i]
            if (item === reportRow) {
              this.leftData.splice(-1, 0, reportRow) // 数据添加到左边列表
              this.reportTable.splice(i, 1) // 数据从右边表格删除
            }
          }

        }

      },

      // 右边表格表格选中行，reportRadio 存放右边选中的数据
      reportRowClick: function(item) {
        this.reportRadio = item
      },
      // 清单配置删除按钮
      reportDelete: function(item) {
        const reportRow = item;
        if (reportRow.length === 0) {
          this.$message.warning('请选择要删除的数据')
        } else {
          for (let i = 0; i < this.reportTable.length; i++) {
            const item = this.reportTable[i]
            if (item === reportRow) {
              item.status = false;
              for (var j = 0; j < this.checkReport.length; j++) {
                if (item.definitionName == this.checkReport[j].definitionName) {
                  this.checkReport[j].status = false;
                  continue;
                }
              }
              // this.DefinitionInfo.splice(-1, 0, reportRow) // 数据添加到左边列表
              this.reportTable.splice(i, 1) // 数据从右边表格删除
            }
          }
        }
      },
    },
  };
</script>

<style scoped>
  .el-form-item {
    margin-bottom: 0;
  }

  .dialog-body {
    margin-left: -50px;
    height: 590px;
    width: 100%;
  }

  .dialog-left {
    width: 30%;
    height: 85%;
    float: left;
    border: 1px solid rgb(193, 222, 250);
    min-height: calc(100% - 180px);
    overflow-y: auto;
    margin-left: 50px;
    background: #f7f8fa;
  }

  .dialog-middle {
    width: 15%;
    height: 100%;
    float: left;
  }

  .dialog-middle-button {
    margin-top: 160px;
    text-align: center;
  }

  .dialog-right {
    margin-left: 60px;
    float: left;
    height: 85%;
    width: 60%;
    border: 1px solid rgb(193, 222, 250);
    min-height: calc(100% - 180px);
    background: #f7f8fa;
    overflow-y: auto;
    position: relative;
  }

  .report-list-div {
    height: 90%;
    margin: 0px;
    padding: 8px;
  }

  .report-list-title {
    display: inline-block;
    width: 100%;
    line-height: 40px;
    text-align: center;
    color: rgb(151, 148, 150);
    font-weight: 600;
    font-family: inherit;
    border-bottom: 1px solid rgb(234, 238, 244);
  }

  .report-list {
    width: 100%;
    margin: 0.5px 0px;
    border-radius: 2px
  }

  .report-add {
    margin-bottom: 7px;
  }

  .report-delete {
    margin: 7px 0px;
  }

  .dialog-right-div {
    width: 93%;
    height: 30%;
    position: relative;
    margin: 15px;
    background-color: #ffffff;
  }

  .dialog-right-level-div {
    width: 93%;
    height: 40%;
    margin: 15px;
    background-color: #ffffff;
    position: relative;
  }

  .reportDeleteClass {
    position: absolute;
    top: 10px;
    right: 0px;
    transform: translate(-60%, -50%);
  }

  .active {
    background-color: blue;
  }

  .normal {}

  .condition-selector-list {
    margin: 20px 34px 26px;
  }

  ol,
  ul {
    list-style: none;
  }

  .content {
    float: left;
    width: 100%;
    position: relative;
    zoom: 1;
    background: #f7f8fa;
    background-color: var(--theme-stroke-9, #fff);
  }

  .condition-selector-list .condition-selector-item {
    cursor: pointer;
    padding: 8px;
    margin: 12px 0 0;
    background: #fff;
    border: 1px solid #ebedf0;
    border-radius: 2px;
    font-size: 14px;
    color: #323233;
    text-align: center;
    line-height: 24px;
  }

  ._1Tmj {
    /* display: -ms-flexbox; */
    display: flex;
    /* -ms-flex-direction: column; */
    flex-direction: column;
    /* -ms-flex-align: center; */
    align-items: center;
  }

  ._3D3R {
    width: 14px;
    height: 1px;
    border-bottom: 2px solid #155bd4;
  }

  ._2qBv {
    width: 1px;
    height: 90px;
    border-left: 2px dashed #155bd4;
  }

  .condition-selector-list .condition-selector-item.selected {
    border: 1px solid #155bd4;
    color: #155bd4;
  }

  .conditions-container {
    padding: 16px;
    height: calc(100% - 102px);
    overflow-y: auto;
    background: #f7f8fa;
  }

  ._2huS,
  ._3RT8 {
    margin-top: 150px;
    display: -ms-flexbox;
    display: flex;
  }

  ._2huS {
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    text-align: center;
  }

  ._3RT8 {
    margin: auto;
  }

  ._2huS,
  ._3RT8 {
    display: -ms-flexbox;
    display: flex;
  }

  ._3NgB {
    border-radius: 50%;
    background-color: rgba(21, 91, 212, .21);
  }

  ._2z7K {
    position: absolute;
    margin-left: 35px;
    margin-top: 100px;
  }

  element.style {
    margin-left: -28px;
    margin-top: 14px;
    width: 132px;
    height: 132px;
  }

  ._3NgB {
    border-radius: 50%;
    background-color: rgba(21, 91, 212, .21);
  }

  .crowd-estimate {
    display: flex;
    width: 100%;
    padding: 19px 32px;
    align-items: center;
    background: #f7f8fa;
    box-shadow: 0 -1px 0 0 #ebedf0;
    margin-bottom: 0px;
    position: sticky;
    /* overflow:hidden; */
    /* position:fixed; */
    float: inherit;
    bottom: 0px;
  }

  .zent-div {
    /* border: 1px solid #1890FF; */
  }

  .zent-input {
    color: var(--theme-stroke-1, #323233);
    display: inline-block;
    flex: 1;
    min-width: 80px;
    height: 100%;
    box-sizing: border-box;
    padding: 0 12px;
    margin: 0;
    font-size: 14px;
    box-shadow: none;
    appearance: none;
    outline: none;
    border: 0;
    background-color: var(--theme-stroke-8, #ffffff);
    border: 1px solid #dcdee0;
  }

  .zent-input:focus {
    border: 1px solid #00aaff;
  }

  .zent-btn {
    margin-left: 10px;
    border-radius: 5px;
    background-color: var(--theme-primary-4, #155bd4);
    border-color: var(--theme-primary-4, #155bd4);
  }

  .zent-span {
    font: inherit;
    color: #ffffff;
  }

  .dialog-conten-text {
    font: inherit;
    margin-top: 12px;
  }

  .dialog-cont {
    float: left;
    margin: 12px;
  }

  .dialog-name {
    width: 86%;
    margin-left: 3%;
    margin-top: 44%;
    height: 1%;
    position: absolute;
  }

  .dialog-button {
    position: absolute;
    right: 100px;
    bottom: 7px;
  }
  .dw {
    margin-left: 81%;
  }
</style>
